<template>
	<view class="login">
		<view class="login-nav">
			<view class="content custom-pc">
				<u-image class="bg-pic" :src="login_bg" width="100vw" mode="aspectFill" style="margin: 0 auto;"></u-image>
				<u-image class="pc-bg-pic" src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/pc_login_bg.png" width="600px" height="400px" style="margin: 0 auto;"></u-image>
			</view>
			<view class="login-form">
				<!-- <view class="form-top">登录</view> -->
				<view class="Grid Grid--center Grid--justifyCenter">
					<u-image :src="login_logo" width="260rpx" height="148rpx" mode="aspectFit" style="margin: 0 auto;"></u-image>
				</view>
				<u--form class="form-main" :model="loginForm" :rules="rules" errorType="toast" ref="loginFormRef">
					<u-form-item label="" prop="account">
						<input v-model="loginForm.account" placeholder="账号" placeholder-class="ipt-place" />
					</u-form-item>
					<!-- <u-form-item label="" prop="password">
						<template>
							<input v-model="loginForm.password" :password="isPassword" placeholder="密码"
								placeholder-class="ipt-place" />
							<template slot="right">
								<u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#cdcfd1" size="28"
									@click="changeIspassword" />
							</template>
						</template>
					</u-form-item> -->
					<u-form-item label="" prop="password">
						<input v-model="loginForm.password" :password="isPassword" placeholder="密码"
							placeholder-class="ipt-place" @blur="textInputClose" id="textInput" />
						<template slot="right">
							<u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#cdcfd1" size="28"
								@click="changeIspassword" />
						</template>
						<!-- <u--text slot="right" :text="textTip" :color="textColor" @click="getCode" />
						<u-code seconds="60" keepRunning ref="uCode" @start="codeStart" @change="codeChange"
							@end="codeEnd" /> -->
					</u-form-item>
				</u--form>
				<view class="form-tip">
					<checkbox-group @change="changeCheckbox">
						<view class="Grid Grid--center">
							<checkbox :value="'true'" :checked="isChecked" activeBorderColor="#0DA25F" iconColor="#0DA25F" style="transform:scale(0.7)" />
							<view class="login-tip">
								已同意
								<span @click="openProtocolPage('USER_AGREEMENT_FB')">《用户协议》</span>
								和
								<span @click="openProtocolPage('PRIVACY_POLICY_FB')">《隐私政策》</span>
							</view>
						</view>
					</checkbox-group>
				</view>
				<view class="form-floor">
					<u-button :customStyle="btnCustomStyle" size="large" text="立即登录" :loading="btnIsLoading"
						@click="handleLogin"></u-button>
					<view class="link">
						<!-- <navigator>找回密码</navigator> -->
						<navigator url="/pages/register/register" open-type="navigate">注册</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		loginPhoneCaptcha
	} from '@/service/index.js'
	import { externalInterfacePost } from "@/service/api/flyio";
	import {
		BASEURL
	} from '@/constant/index.js'
	import login_bg from '@/static/image/login_bg.png'
	import login_logo from '@/static/image/login_logo.png'

	export default {
		data() {
			return {
				login_bg,
				login_logo,
				loginForm: {
					acc_type: 'username',
					account: '',
					password: '',
					platform: '20',
					application: '22',
					client_id: ''
				},
				token: '',
				isChecked: false,
				// 校验规则
				rules: {
					account: [{
						required: true,
						message: '账号不能为空',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					}]
				},
				// 登录按钮loading
				btnIsLoading: false,
				isPassword: true,
				// 登录按钮样式
				btnCustomStyle: {
					width: '620rpx',
					height: '100rpx',
					background: '#0DA25F',
					fontSize: '36rpx',
					color: '#FEFEFF',
					borderRadius: '20rpx',
					// boxShadow: '0rpx 8rpx 16rpx 0rpx rgba(45,108,254,0.26)'
				},
				codeDisabled: false,
				textTip: '获取验证码',
				textColor: '#0DA25F',
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		onReady() {

		},
		onLoad(options) {
			// #ifdef H5
			this.loginForm.application = 22
			// #endif
			// #ifdef APP-PLUS
			this.loginForm.application = 24
			// #endif
		},
		methods: {
			// 显示与隐藏密码
			changeIspassword() {
				this.isPassword = !this.isPassword
			},
			// 勾选协议
			changeCheckbox(e) {
				let _value = e.detail.value
				this.isChecked = _value.length ? true : false
			},
			// 跳转到协议页面
			openProtocolPage(type) {
				const option = JSON.stringify({
					type
				})
				uni.navigateTo({
					url: `/pages/agreement/agreement?opt=${option}`
				})
			},
			// 登录
			async handleLogin() {
				this.btnIsLoading = true

				try {
					// 校验
					await this.$refs.loginFormRef.validate()
					if (!this.isChecked) throw Error(this.$showToast('请阅读并勾选下方协议'))
					// #ifdef H5
					await this.$store.dispatch('login/appLoginAction', this.loginForm)
					// #endif
					// #ifdef APP-PLUS
					uni.getPushClientId({
						success: async (res) => {
							console.log("cid")
							console.log(res.cid);
							this.loginForm.client_id = res.cid
							console.log(this.loginForm)
							await this.$store.dispatch('login/appLoginAction', this.loginForm)
						},
						fail(err) {
							console.log(err)
						}
					})
					// #endif
					
				} catch (e) {}

				this.btnIsLoading = false
			},
			// 获取验证码
			async getCode() {
				console.log(this.codeDisabled)
				try {
					if (this.codeDisabled) return this.$showToast('倒计时结束后再点击获取')
					let errTips = []
					await this.$refs.loginFormRef.validateField('phone',  async(errorsRes) => {
						errTips = errorsRes.map(item => item.message)
						if (errTips.length) {
							return this.$showToast(errTips[0])
						}
						let res = await loginPhoneCaptcha({
							phone: this.loginForm.phone
						})
						console.log(res)
						this.$showToast('验证码已发送')
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} catch (e) {}
			},
			codeStart() {
				this.textColor = '#57616B'
				this.codeDisabled = true
			},
			// 验证码倒计时期间，每秒触发一次
			codeChange(text) {
				this.textTip = text
			},
			codeEnd() {
				this.textColor = '#0DA25F'
				this.codeDisabled = false
			},
			textInputClose() {
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.login {
		height: 100vh;

		.login-nav {
			position: absolute;
			width: 100vw;
			height: 100vh;
			background-color: #0DA25F;
			background-size: 100% 100%;

			.content {
				display: flex;
				flex-direction: column;
				
				.pc-bg-pic {
					display: none;
				}

				.desc {
					margin-top: 25rpx;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.login-form {
				width: 698rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 41, 114, 0.08);
				border-radius: 30rpx;
				margin: 0 auto;
				padding: 74rpx 39rpx 71rpx;


				.form-top {
					font-size: 42rpx;
					font-weight: bold;
					color: #191C1F;
				}

				.form-main {
					margin: 78rpx 0 38rpx;

					::v-deep .u-form-item {
						&:nth-child(1) {
							margin-bottom: 44rpx;
						}

						.u-form-item__body {
							padding: 35rpx 32rpx;
							width: 620rpx;
							background: #F4F6F8;
							border-radius: 20rpx;

							.ipt-place {
								font-size: 32rpx;
								color: #788593;
							}
						}
					}
				}
				.form-tip {
					margin-bottom: 30rpx;

					.login-tip {
						font-size: 24rpx;
						color: #788593;

						span {
							color: #007EFF;
						}
					}
				}

				.form-floor {
					.link {
						display: flex;
						justify-content: flex-end;
						// justify-content: space-between;
						font-size: 28rpx;
						color: #AEB7C3;
						margin-top: 35rpx;
					}
				}
			}

		}
	}
	@media screen and (min-width: 750px) {
		.custom-pc .bg-pic {
			display: none;
		}
		.custom-pc .pc-bg-pic {
			display: initial !important;
			width: 750px !important;
			margin: 0 auto !important;
			::v-deep .u-image {
				margin: 0 auto !important;
			}
		}
	}
</style>